<template>
  <div class="ov">
    <div class="ov__tags">
      <div class="ov__tags__tag">
        <div src="" alt="" class="ov__tags__tag__img iconfont">&#xe645;</div>
        <div class="ov__tags__tag__text">
          <p class="ov__tags__tag__text__title">累计上线品牌数（个）</p>
          <p class="ov__tags__tag__text__num">{{ totalBrand }}</p>
          <p class="ov__tags__tag__text__details">
            <span class="iconfont">&#xe622;</span>
            新增品牌数：{{ newBrands }}
            <span
              class="ov__tags__tag__text__details__icon"
              @click="showBrandDetail"
              >详情</span
            >
          </p>
        </div>
      </div>
      <div class="ov__tags__tag">
        <div src="" alt="" class="ov__tags__tag__img iconfont">&#xe623;</div>
        <div class="ov__tags__tag__text">
          <p class="ov__tags__tag__text__title">累计上线车型数（个）</p>
          <p class="ov__tags__tag__text__num">{{ totalModels }}</p>
          <p class="ov__tags__tag__text__details">
            <span class="iconfont">&#xe622;</span>
            新增车型数：{{ newModels }}
            <span
              class="ov__tags__tag__text__details__icon"
              @click="showModelDetail"
              >详情</span
            >
          </p>
        </div>
      </div>
      <div class="ov__tags__tag">
        <div src="" alt="" class="ov__tags__tag__img iconfont">&#xe604;</div>
        <div class="ov__tags__tag__text">
          <p class="ov__tags__tag__text__title">累计上线内容数（个）</p>
          <p class="ov__tags__tag__text__num">{{ totalContent }}</p>
          <p class="ov__tags__tag__text__details">
            <span class="iconfont">&#xe622;</span>
            新增内容数：{{ newContent }}
            <span
              class="ov__tags__tag__text__details__icon"
              @click="showContentDetail"
              >详情</span
            >
          </p>
        </div>
      </div>
    </div>
    <div class="ov__time">
      <span>更新内容列表时间</span>
      <span>( 数据更新时间: {{ time }} )</span>
    </div>
    <div class="ov__content">
      <div class="ov__content__checks">
        <template v-if="showBChecks">
          <Check
            :title="'品牌属性'"
            :options="checks.brandAttributeSets"
            class="ov__content__checks__check"
            style="margin-left: 0"
            @changeValue="valueChange"
          />
          <Check
            :title="'品牌名称'"
            :options="checks.brandNameSets"
            class="ov__content__checks__check"
            @changeValue="valueChange"
          />
          <Check
            :title="'车型名称'"
            :options="checks.modelSets"
            class="ov__content__checks__check"
            @changeValue="valueChange"
            v-if="resetBrandName"
          />
          <Check
            :title="'内容板块'"
            :options="checks.contentTypeSets"
            class="ov__content__checks__check"
            @changeValue="valueChange"
            v-if="resetBrandName && resetContentType"
          />
        </template>
        <Search class="ov__content__checks__search" @click="search" />
        <Reset class="ov__content__checks__reset" @click="resetAll" />
      </div>
      <ul class="ov__content__list">
        <li class="ov__content__list__line">
          <span
            class="ov__content__list__line__block"
            v-for="(title, index) in title"
            :key="{ index }"
            >{{ title }}</span
          >
        </li>
        <li
          class="ov__content__list__line"
          v-for="(item, index) in list.data"
          :key="index"
        >
          <span>{{ (list.pageNum - 1) * 10 + index + 1 }}</span>
          <span>{{ item.brandName }}</span>
          <span>{{ item.model }}</span>
          <span>{{ item.contentType }}</span>
          <span>{{ item.newNum }}</span>
          <span>{{ item.description }}</span>
          <span><ToDetail /></span>
        </li>
      </ul>
      <el-pagination
        @current-change="next"
        background
        small
        layout="prev, pager, next"
        :total="list.totalPages * 10"
        class="ov__content__page"
        :current-page="list.pageNum"
      />
    </div>
  </div>
  <Transition name="alert">
    <div class="alert" v-if="showB">
      <div class="alert__head">
        <span class="alert__head__title">累计上线汽车品牌明细</span>
        <span class="alert__head__close iconfont" @click="close">&#xeaf2;</span>
      </div>
      <ul class="alert__list" id="list">
        <li class="alert__list__line alert__list__title">
          <span v-for="(item, index) in brandAlert" :key="index">{{
            item
          }}</span>
        </li>
        <li
          class="alert__list__line"
          v-for="(item, index) in brandsDetail"
          :key="index"
        >
          <span>{{ item.brandAttribute }}</span>
          <span>{{ item.brandName }}</span>
          <span>{{ item.status.status }}</span>
        </li>
      </ul>
      <p class="alert__buttom">
        <span
          >注: 新增汽车品牌会优先展示,且品牌属性、名称及上线状态会用<span
            class="alert__buttom__red"
            >"红色"</span
          >字体标出</span
        >
        <span class="alert__buttom__close" @click="close">关闭</span>
      </p>
    </div>
  </Transition>
  <Transition name="alert">
    <div class="alert" v-if="showM">
      <div class="alert__head">
        <span class="alert__head__title">累计上线车型明细</span>
        <span class="alert__head__close iconfont" @click="close">&#xeaf2;</span>
      </div>
      <ul class="alert__list" id="list">
        <li class="alert__list__line alert__list__title">
          <span v-for="(item, index) in modelAlert" :key="index">{{
            item
          }}</span>
        </li>
        <li
          class="alert__list__line"
          v-for="(item, index) in modelDetail"
          :key="index"
        >
          <span>{{ item.brandName }}</span>
          <span>{{ item.model }}</span>
          <span>{{ item.status.status }}</span>
        </li>
      </ul>
      <p class="alert__buttom">
        <span
          >注: 新增车型会优先展示,且品牌、车型名称及上线状态会用<span
            class="alert__buttom__red"
            >"红色"</span
          >字体标出</span
        >
        <span class="alert__buttom__close" @click="close">关闭</span>
      </p>
    </div>
  </Transition>
  <Transition name="alert">
    <div class="alert" v-if="showC">
      <div class="alert__head">
        <span class="alert__head__title">累计上线车型明细</span>
        <span class="alert__head__close iconfont" @click="close">&#xeaf2;</span>
      </div>
      <ul class="alert__list" id="list">
        <li class="alert__list__line alert__list__title">
          <span v-for="(item, index) in contentAlert" :key="index">{{
            item
          }}</span>
        </li>
        <li
          class="alert__list__line"
          v-for="(item, index) in contentDetail"
          :key="index"
        >
          <span>{{ item.contentType }}</span>
          <span>{{ item.existNum }}</span>
          <span>{{ item.newNum }}</span>
          <span>{{ item.totalNum }}</span>
        </li>
      </ul>
      <p class="alert__buttom">
        <span
          >注: 有新增内容的内容模块会高亮显示，且模块名称与内容点数量会用<span
            class="alert__buttom__red"
            >"红色"</span
          >字体标出</span
        >
        <span class="alert__buttom__close" @click="close">关闭</span>
      </p>
    </div>
  </Transition>
  <Transition name="alert">
    <div class="bg" v-if="showB || showM || showC" @click="close"></div>
  </Transition>
</template>
<script>
import Check from "@/components/Check.vue";
import Reset from "@/components/Reset.vue";
import Search from "@/components/Search.vue";
import { useRouter } from "vue-router";
import { get } from "@/utils/request";
import { reactive, toRefs, ref, nextTick } from "vue";
import ToDetail from "@/components/ToDetail.vue";

//顶部Tag栏逻辑
const useTagsEffect = () => {
  const data = reactive({
    totalBrand: "",
    newBrands: "",
    totalModels: "",
    newModels: "",
    totalContent: "",
    newContent: "",
  });
  const router = useRouter();
  const getBrandsNum = async () => {
    const result = await get(
      "/icvdb/brandlist",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    if (result.code === 200) {
      data.totalBrand = result.data.totalBrand;
    } else if (result.code === 401) {
      router.push({
        name: "Login",
      });
    }
  };

  const getNewBrands = async () => {
    const result = await get(
      "/icvdb/brandlist",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.newBrands = result.data.newBrands;
  };

  const getTotalModels = async () => {
    const result = await get(
      "/icvdb/modellist",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.totalModels = result.data.totalModels;
  };

  const getNewModels = async () => {
    const result = await get(
      "/icvdb/modellist",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.newModels = result.data.newModels;
  };

  const getTotalContent = async () => {
    const result = await get(
      "/icvdb/contentlist",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.totalContent = result.data.totalContent;
  };

  const getNewContent = async () => {
    const result = await get(
      "/icvdb/contentlist",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.newContent = result.data.newContent;
  };
  getBrandsNum();
  getNewBrands();
  getTotalModels();
  getNewModels();
  getTotalContent();
  getNewContent();
  const {
    totalBrand,
    newBrands,
    totalModels,
    newModels,
    totalContent,
    newContent,
  } = toRefs(data);
  return {
    totalBrand,
    newBrands,
    totalModels,
    newModels,
    totalContent,
    newContent,
  };
};
//数据更新时间逻辑
const useTimeEffect = () => {
  let time = ref("");
  const getTime = async () => {
    const result = await get(
      "/icvdb/latesttime",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    time.value = result.data;
  };
  getTime();
  return { time };
};
//筛选框逻辑
const useChecksEffect = () => {
  let showBChecks = ref(true);
  let resetBrandName = ref(true);
  let resetContentType = ref(true);
  // 筛选框所有值
  const data = reactive({
    checks: {},
  });

  // 当前筛选框的值
  //品牌属性Id
  let brandTypeId = ref("");
  //品牌Id
  let brandId = ref("");
  //车型Id
  let carId = ref("");
  //内容板块Id
  let classId = ref("");

  //请求数据
  const getChecks = async (brandTypeId, brandId, carId, classId) => {
    const result = await get(
      "/icvdb/checks",
      {
        brandAttribute: brandTypeId,
        brandName: brandId,
        model: carId,
        contentType: classId,
      },
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.checks = result.data;
  };
  getChecks("", "", "", "");

  //数据改变
  const valueChange = async (title, option) => {
    let tmp = {};
    if (title === "品牌属性") {
      tmp = data.checks.brandAttributeSets;
      brandTypeId.value = option;
      if (option === "") {
        brandId.value = "";
        carId.value = "";
        classId.value = "";
        await getChecks(
          brandTypeId.value,
          brandId.value,
          carId.value,
          classId.value
        );
        showBChecks.value = false;
        nextTick(() => {
          showBChecks.value = true;
        });
      } else {
        await getChecks(
          brandTypeId.value,
          brandId.value,
          carId.value,
          classId.value
        );
        data.checks.brandAttributeSets = tmp;
      }
    } else if (title === "品牌名称") {
      tmp = data.checks.brandNameSets;
      brandId.value = option;
      if (option === "") {
        //内容板块Id
        classId.value = "";
        await getChecks(
          brandTypeId.value,
          brandId.value,
          carId.value,
          classId.value
        );
        resetContentType.value = false;
        nextTick(() => {
          resetContentType.value = true;
        });
      } else {
        await getChecks(
          brandTypeId.value,
          brandId.value,
          carId.value,
          classId.value
        );
        data.checks.brandNameSets = tmp;
      }
    } else if (title === "车型名称") {
      tmp = data.checks.modelSets;
      carId.value = option;
      if (option === "") {
        //车型Id
        carId.value = "";
        //内容板块Id
        classId.value = "";
        await getChecks(
          brandTypeId.value,
          brandId.value,
          carId.value,
          classId.value
        );
        resetBrandName.value = false;
        nextTick(() => {
          resetBrandName.value = true;
        });
      } else {
        await getChecks(
          brandTypeId.value,
          brandId.value,
          carId.value,
          classId.value
        );
        data.checks.modelSets = tmp;
      }
    } else if (title === "内容板块") {
      tmp = data.checks.contentTypeSets;
      classId.value = option;
      await getChecks(
        brandTypeId.value,
        brandId.value,
        carId.value,
        classId.value
      );
      data.checks.contentTypeSets = tmp;
    }
  };

  //重置按钮逻辑
  const reset = () => {
    brandTypeId.value = "";
    brandId.value = "";
    carId.value = "";
    classId.value = "";
    getChecks("", "", "", "");
  };

  const { checks } = toRefs(data);
  return {
    checks,
    getChecks,
    valueChange,
    reset,
    showBChecks,
    resetBrandName,
    resetContentType,
    brandTypeId,
    brandId,
    carId,
    classId,
  };
};

//列表逻辑
const useListEffect = () => {
  const data = reactive({
    list: {},
  });
  const title = [
    "序号",
    "品牌名称",
    "车型名称",
    "内容板块",
    "更新内容点数量",
    "更新内容点简介",
    "操作",
  ];
  //请求列表数据
  const getList = async (brandTypeId, brandId, carId, classId, pageNumber) => {
    const result = await get(
      "/icvdb",
      {
        brandAttribute: brandTypeId,
        brandName: brandId,
        model: carId,
        contentType: classId,
        pageNum: pageNumber,
        pageSize: 10,
      },
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    data.list = result;
  };
  getList("", "", "", "", 1);
  const { list } = toRefs(data);
  return { list, title, getList };
};

//详情弹窗逻辑
const useAlertEffects = () => {
  const brandAlert = ["品牌属性", "品牌名称", "上线状态"];
  const modelAlert = ["品牌名称", "车型名称", "上线状态"];
  const contentAlert = [
    "内容模块",
    "现有内容点数量",
    "新增内容点数量",
    "内容点总量",
  ];
  const data = reactive({
    brandsDetail: {},
    modelDetail: {},
    contentDetail: {},
  });
  let showB = ref(false);
  let showM = ref(false);
  let showC = ref(false);
  const showBrandDetail = async () => {
    showB.value = true;
    const result = await get(
      "/icvdb/brandlist",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    if (result.code === 200) {
      data.brandsDetail = result.data.detail;
    } else if (result.code === 401) {
      router.push({
        name: "Login",
      });
    }
  };

  const showModelDetail = async () => {
    showM.value = true;
    const result = await get(
      "/icvdb/modellist",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    if (result.code === 200) {
      data.modelDetail = result.data.detail;
    } else if (result.code === 401) {
      router.push({
        name: "Login",
      });
    }
  };

  const showContentDetail = async () => {
    showC.value = true;
    const result = await get(
      "/icvdb/contentlist",
      {},
      { Authorization: "Bearer" + " " + localStorage.token }
    );
    if (result.code === 200) {
      data.contentDetail = result.data.detail;
    } else if (result.code === 401) {
      router.push({
        name: "Login",
      });
    }
  };

  const close = () => {
    showB.value = false;
    showM.value = false;
    showC.value = false;
  };

  const { brandsDetail, modelDetail, contentDetail } = toRefs(data);
  return {
    showB,
    showM,
    showC,
    close,
    showBrandDetail,
    showModelDetail,
    showContentDetail,
    brandAlert,
    brandsDetail,
    modelAlert,
    modelDetail,
    contentAlert,
    contentDetail,
  };
};

export default {
  components: { Check, Search, Reset, ToDetail },
  setup() {
    //Tag栏逻辑
    const {
      totalBrand,
      newBrands,
      totalModels,
      newModels,
      totalContent,
      newContent,
    } = useTagsEffect();
    //弹窗逻辑
    const {
      showB,
      showM,
      showC,
      close,
      showBrandDetail,
      showModelDetail,
      showContentDetail,
      brandAlert,
      brandsDetail,
      modelAlert,
      modelDetail,
      contentDetail,
      contentAlert,
    } = useAlertEffects();
    //更新时间逻辑
    const { time } = useTimeEffect();
    //筛选框逻辑
    const {
      checks,
      valueChange,
      reset,
      showBChecks,
      resetBrandName,
      resetContentType,
      brandTypeId,
      brandId,
      carId,
      classId,
    } = useChecksEffect();
    //列表逻辑
    const { list, title, getList } = useListEffect();

    //查询按钮逻辑
    const search = () => {
      getList(brandTypeId.value, brandId.value, carId.value, classId.value, 1);
    };
    //重置按钮
    const resetAll = () => {
      reset();
      getList("", "", "", "", 1);
      showBChecks.value = false;
      nextTick(() => {
        showBChecks.value = true;
      });
    };
    //切换页面
    const next = (currentPage) => {
      getList(
        brandTypeId.value,
        brandId.value,
        carId.value,
        classId.value,
        currentPage
      );
    };

    return {
      title,
      list,
      checks,
      valueChange,
      search,
      resetAll,
      next,
      showBChecks,
      showB,
      showM,
      showC,
      showBrandDetail,
      showModelDetail,
      showContentDetail,
      brandAlert,
      brandsDetail,
      close,
      totalBrand,
      newBrands,
      totalModels,
      newModels,
      totalContent,
      newContent,
      modelAlert,
      modelDetail,
      contentDetail,
      contentAlert,
      time,
      resetBrandName,
      resetContentType,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/viriables.scss";
@keyframes showB {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ov {
  flex: 1;
  margin-top: 0.5vh;
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  &__tags {
    height: 20rem;
    background-color: white;
    padding: 1rem 0;
    display: flex;
    justify-content: space-around;
    &__tag {
      background-color: $light-gray;
      width: 32%;
      display: flex;
      &__img {
        font-size: 11.6rem;
        display: flex;
        align-items: center;
        margin-left: 5.3rem;
      }
      &__text {
        flex: 1;
        padding-top: 2.3rem;
        &__title {
          font-size: 2rem;
          text-indent: 6.5rem;
          font-weight: bold;
        }
        &__num {
          text-indent: 13rem;
          font-size: 5rem;
          height: 5rem;
          margin-top: 1.5rem;
          font-weight: bold;
        }
        &__details {
          font-size: 1.6rem;
          margin-top: 2.5rem;
          padding-left: 8rem;
          position: relative;
          .iconfont {
            color: #bd3124;
            position: relative;
            top: 0.1rem;
          }
          &__icon {
            background-color: $light-blue;
            cursor: pointer;
            border-radius: 80%;
            font-size: 1.2rem;
            width: 5.4rem;
            height: 2.4rem;
            display: inline-block;
            text-align: center;
            line-height: 2.4rem;
            color: white;
            margin-left: 3rem;
            transition: 0.3s ease;
          }
          &__icon:hover {
            background-color: $blue;
          }
        }
      }
    }
  }
  &__time {
    height: 4.2rem;
    background-color: white;
    margin: 0.7rem 0;
    line-height: 4.2rem;
    padding-left: 2.5%;
    span:nth-of-type(1) {
      font-weight: bolder;
    }
    span:nth-of-type(2) {
      margin-left: 0.5rem;
    }
  }
  &__content {
    flex: 1;
    background-color: white;
    position: relative;
    &__page {
      position: absolute;
      width: min-content;
      left: 50%;
      transform: translate(-50%);
      bottom:1rem;
    }
    &__checks {
      width: 95%;
      margin: 0 auto;
      margin-top: 2rem;
      display: flex;
      align-items: center;
      text-align: center;
      position: relative;
      &__check {
        margin-left: 2rem;
      }
      &__search {
        position: absolute;
        right: 8.2rem;
      }
      &__reset {
        position: absolute;
        right: 0;
      }
    }
    &__list {
      margin: 0 auto;
      margin-top: 2rem;
      margin-bottom: 0.5rem;
      width: 95%;
      display: flex;
      flex-direction: column;
      border: 1px solid $light-gray;
      li:nth-of-type(2n-1) {
        background-color: $light-gray;
      }
      &__line {
        display: flex;
        text-align: center;
        height: 4.8rem;
        line-height: 4.8rem;
        span::-webkit-scrollbar {
          display: none;
        }
        span:nth-of-type(1) {
          width: 5.9rem;
        }
        span:nth-of-type(2) {
          width: 15rem;
        }
        span:nth-of-type(3) {
          width: 15rem;
        }
        span:nth-of-type(4) {
          width: 15rem;
        }
        span:nth-of-type(5) {
          width: 15rem;
        }
        span:nth-of-type(6) {
          flex: 1;
          overflow: scroll;
        }
        span:nth-of-type(7) {
          width: 11.7rem;
        }
      }
    }
  }
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.4);
  z-index: 10;
  cursor: pointer;
}
.alert {
  z-index: 100;
  position: absolute;
  top: 18rem;
  bottom: 18rem;
  left: 40rem;
  right: 40rem;
  background-color: white;
  border-radius: 1rem;
  overflow: hidden;
  transition: 1s;
  &-enter-active,
  &-leave-active {
    transition: opacity 0.3s ease;
  }
  &-enter-from,
  &-leave-to {
    opacity: 0;
  }
  &__head {
    background-color: $deep-gray;
    height: 4.8rem;
    &__title {
      line-height: 4.8rem;
      margin-left: 2rem;
      font-weight: bold;
    }

    &__close {
      float: right;
      line-height: 4.8rem;
      margin-right: 2rem;
      font-weight: bold;
      cursor: pointer;
      opacity: 0.6;
      transition: 0.3s ease;
    }
    &__close:hover {
      opacity: 1;
    }
  }
  &__list::-webkit-scrollbar {
    width: 0.5rem;
  }

  &__list::-webkit-scrollbar-button {
    display: none;
  }

  &__list::-webkit-scrollbar-thumb {
    background-color: $scroll-gray;
    border-radius: 10px;
  }
  &__list::-webkit-scrollbar-thumb:hover {
    background-color: $scroll-deep-gray;
  }
  &__list {
    width: 90rem;
    margin: auto;
    margin-top: 1rem;
    max-height: 52.8rem;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    li:nth-of-type(2n-1) {
      background-color: $light-gray;
    }
    &__line {
      display: flex;
      line-height: 4.8rem;
      height: 4.8rem;
      span {
        flex: 1;
        text-align: center;
      }
    }
    &__title {
      background-color: $lighter-blue !important;
      width: 90rem;
      position: sticky;
      top: 0;
    }
  }
  &__buttom {
    position: absolute;
    padding: 0 5rem 0 10rem;
    bottom: 0;
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    &__red {
      color: red;
    }
    &__close:hover {
      background-color: $deep-blue;
    }
    &__close {
      float: right;
      height: 3rem;
      line-height: 3rem;
      margin-top: 0.5rem;
      width: 8.5rem;
      text-align: center;
      color: white;
      font-weight: bold;
      border-radius: 0.5rem;
      background-color: $blue;
      cursor: pointer;
      transition: 0.3s ease;
    }
  }
}
</style>